<script setup>
import { ref } from 'vue';
import HomeBanner from './components/HomeBanner.vue'
import router from '@/router';

const categoryTitle = ref('店铺分类')
const categoryList = [
  { id: 1, name: '男装' },
  { id: 2, name: '女装' },
  { id: 3, name: '童装' },
  { id: 4, name: '运动服' },
  { id: 5, name: '内衣' },
  { id: 6, name: '配饰' },
  { id: 7, name: '鞋类' }
]
const bannerList = [
  {
    id: 1,
    imgUrl: 'https://img.zcool.cn/community/0111c0610bd12211013f47207d7631.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100',
  },
  {
    id: 2,
    imgUrl: 'https://img.zcool.cn/community/01f82c57e5cb300000012e7ef52bba.jpg?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp',
  },
  {
    id: 3,
    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.7eb32da429f657b793918ae51eac0a81?rik=D4kWghffgaMWjQ&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f011f38554268ff0000019ae911fd1f.jpg%401280w_1l_2o_100sh.jpg&ehk=%2bvXc34dJjlwX2Qqer9coqf1fWAoQ1yebJPfbKm4ckQk%3d&risl=&pid=ImgRaw&r=0',
  }
]

const regionDict = ['北京', '上海', '广州', '深圳']

import { getStoreListAPI ,getStoreRankAPI } from '@/api/shop'
const storeList = ref([])
const getStoreList = async () => {
  const res = await getStoreListAPI()
  // console.log(res.data)
  storeList.value = res.data.data
}
getStoreList()

const rankList = ref([])
const getStoreRank = async () => {
  const res = await getStoreRankAPI()
  rankList.value = res.data.data
}
getStoreRank()

</script>

<template>
  
  <div class="container">
    <!-- <HomeBanner :title="categoryTitle" :categories="categoryList" :bannerList="bannerList"/> -->
  <div class="category-box">
  <div class="recommod">
    <h1>店铺推荐</h1>
  </div>
    <ul>
      <li>全部</li>
      <li v-for="category in categoryList" :key="category.id">{{ category.name }}</li>
    </ul>
    <ul>
      <li>
        <el-dropdown  placement="bottom">
          <span class="el-dropdown-link">
            区域位置
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="region in regionDict" :key="region">{{ region }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li>
        <el-dropdown>
          <span class="el-dropdown-link">综合排序<el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>信用排序</el-dropdown-item>
              <el-dropdown-item>销量排序</el-dropdown-item>
              <el-dropdown-item>评价排序</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li>
        <el-dropdown>
          <span class="el-dropdown-link">更多筛选<el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>1</el-dropdown-item>
              <el-dropdown-item>2</el-dropdown-item>
              <el-dropdown-item>3</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </div>
  <div class="home-store">
    <div class="storeList-box">
      <ul class="store-list">
        <li class="list-item" v-for="item in storeList" :key="item.id">
          <RouterLink :to="{name: 'store', params: {storeid: item.id}}">
          <div class="main">
            <div class="store-name">
              <p>{{ item.name }}</p>
              <span class="location">{{ item.location }}</span>
            </div> 
            <div class="desc"><p>{{item.description }}</p></div>
            <div class="store-footer">
              <span>店铺销量<span style="margin-left: 5px;">{{ item.sales }}</span></span>
              <span style="margin-left: 10px;">综合评价
                <el-rate
                  v-model="item.rate"
                  disabled
                  show-score
                  text-color="#ff9900"
                  style="height: 20px;"
                />
              </span>
            </div>
            <ul class="imgList">
              <li v-for="(imgURL, index) in item.imgURLs" :key="index">
              <img :src="imgURL" alt="商品图片" />
              </li>
            </ul>
          </div>
          </RouterLink>
        </li>
        <li></li>
      </ul>
      </div>
      <!-- <div class="recommod-rank">
        <div class="recommod-main">
          <p style="font-size: 28px;">店铺排行榜</p>
          <ul>
            <li class="item-box" v-for="item in rankList" :key="item.id">
              <div class="item-name">
                <p>{{ item.name }}</p>
              <span class="location">{{ item.location.slice(0, 2) }}</span>
              </div>
              <div class="item-content">
                <p class="desc">{{ item.description }}</p>
                <div class="footer">
                  <span>店铺销量<span style="margin-left: 5px;">{{ item.sales }}</span></span>
                  <span style="margin-left: 10px;">综合评价
                    <el-rate
                      v-model="item.rate"
                      disabled
                      show-score
                      size="small"
                      text-color="#ff9900"
                      style="height: 20px;"
                    />
                  </span>
                </div>
                <ul class="rank-img">
                  <li v-for="(imgURL,index) in item.imgURLs" :key="index">
                    <img :src="imgURL" alt="店铺图片"/>
                  </li>
                </ul>
              </div> 
            </li>
          </ul>
        </div>
      </div> -->
    </div>
  </div>

</template>

<style scoped lang="scss">
  .category-box{ 
  // margin-top: 20px;
  background: #fff;
  .recommod{
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0 0 20px;
      align-items: flex-end; //底部对齐
      p{
        margin-left: 10px;
        color: #999;
      }
    }
    ul{
      margin: 10px 0 0 20px;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e0e0e0;
    li{
      padding: 10px;
      margin-right: 20px;
      font-size: 18px;
    }
    }
    .el-dropdown-link{
      font-size: 18px;
    }
  }
  .home-store{
    min-height:1000px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .storeList-box{
    width: 864px;
  }

  .store-list{

    .list-item{
      background: #fff;
      // height: 234px;
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      transition: all .5s;

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }
    }

    .imgList{
      display: flex;
      
      img{
      width: 150px;
      height: 150px;
      margin-right: 10px;
    }
    }
  }

  .main{
    width: 100%;
    padding: 20px;
    width: 864px;

    .desc{
      padding: 5px;
    }
    .store-footer{
      padding: 5px;

      color:#999

    }
  }

  .store-name{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .location{
      color:#999
    }
    p{
      margin-left: 5px;
      font-size: 24px;
    }
  }

  .recommod-rank{
    width: 350px;
    max-height: 1000px;
    background: #fff;

  .recommod-main{
    padding: 10px;
    p{
      padding: 10px;
    }
  }
  .item-box{
    background: #fff;
    height: 270px;
    margin-top: 20px;
    .item-name{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      margin-bottom: 0;
      p{
        font-size: 22px;
      }
      .location{
        color:#999;
        font-size:16px;
        margin-right: 10px;
      }
    }
    .item-content{
      .footer{
        color:#999;
        margin-left: 10px;
      }
      .desc{

      }
    }
    .rank-img{
      display: flex;
      justify-content: center;
      img{
        height: 150px;
        margin: 5px;
      }
    }
  }
  }
</style>